<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>剧情体验 - 奇幻冒险之旅</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-blue: #3b82f6;
            --secondary-blue: #06b6d4;
            --light-blue: #f0f7ff;
            --light-gray-blue: #f8fafc;
            --text-dark: #334155;
            --text-light: #64748b;
            --border-light: rgba(59, 130, 246, 0.1);
            --shadow: 0 4px 20px rgba(59, 130, 246, 0.08);
            --gradient-primary: linear-gradient(135deg, #3b82f6, #06b6d4);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: var(--light-gray-blue);
            background-image: radial-gradient(#c9d6e3 1px, transparent 1px);
            background-size: 20px 20px;
            color: var(--text-dark);
            line-height: 1.6;
            min-height: 100vh;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 1rem;
        }

        /* 顶部导航 */
        .top-nav {
            height: 72px;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border-light);
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 1.5rem;
            margin-bottom: 1.5rem;
        }

        .nav-left {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .back-btn {
            background: none;
            border: none;
            font-size: 1.2rem;
            color: var(--primary-blue);
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .back-btn:hover {
            background: rgba(59, 130, 246, 0.1);
        }

        .theater-name {
            font-size: 1.5rem;
            font-weight: 600;
        }

        .nav-right {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .player-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background: rgba(59, 130, 246, 0.1);
            padding: 0.5rem 1rem;
            border-radius: 1.5rem;
        }

        .player-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 2px solid var(--primary-blue);
            object-fit: cover;
        }

        .player-name {
            font-weight: 500;
            font-size: 0.95rem;
        }

        /* 内容区域 */
        .content-area {
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 1.5rem;
        }

        /* 剧情展示区 */
        .story-container {
            background: white;
            border-radius: 1rem;
            padding: 2rem;
            box-shadow: var(--shadow);
            min-height: 500px;
            display: flex;
            flex-direction: column;
        }

        .scene-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border-light);
        }

        .scene-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary-blue);
        }

        .scene-location {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--text-light);
            font-size: 0.95rem;
        }

        .dialogue-container {
            flex-grow: 1;
            margin-bottom: 1.5rem;
        }

        .narrative {
            font-size: 1.1rem;
            line-height: 1.7;
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: rgba(59, 130, 246, 0.05);
            border-radius: 0.5rem;
        }

        .dialogue {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .character-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 2px solid var(--primary-blue);
            object-fit: cover;
            flex-shrink: 0;
        }

        .dialogue-content {
            flex-grow: 1;
        }

        .character-name {
            font-weight: 600;
            margin-bottom: 0.25rem;
            color: var(--primary-blue);
        }

        .dialogue-text {
            background: white;
            padding: 1rem;
            border-radius: 0.75rem;
            border: 1px solid var(--border-light);
            box-shadow: var(--shadow);
            line-height: 1.6;
        }

        /* 选项区域 */
        .choices-container {
            margin-top: auto;
        }

        .choices-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--text-dark);
        }

        .choice-btn {
            display: block;
            width: 100%;
            text-align: left;
            padding: 1rem 1.5rem;
            margin-bottom: 0.75rem;
            background: white;
            border: 1px solid var(--border-light);
            border-radius: 0.75rem;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1rem;
            line-height: 1.5;
        }

        .choice-btn:hover {
            background: rgba(59, 130, 246, 0.05);
            border-color: var(--primary-blue);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
        }

        /* 侧边栏 */
        .sidebar {
            background: white;
            border-radius: 1rem;
            box-shadow: var(--shadow);
            padding: 1.5rem;
            height: fit-content;
        }

        .sidebar-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            color: var(--text-dark);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .characters-list {
            margin-bottom: 2rem;
        }

        .character-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem;
            border-radius: 0.5rem;
            margin-bottom: 0.75rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .character-item:hover {
            background: rgba(59, 130, 246, 0.05);
        }

        .character-item.active {
            background: rgba(59, 130, 246, 0.1);
            border-left: 3px solid var(--primary-blue);
        }

        .character-item-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid var(--primary-blue);
            object-fit: cover;
        }

        .character-item-info {
            flex-grow: 1;
        }

        .character-item-name {
            font-weight: 500;
            margin-bottom: 0.1rem;
        }

        .character-item-desc {
            font-size: 0.8rem;
            color: var(--text-light);
        }

        .inventory-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin: 1.5rem 0 1rem;
            color: var(--text-dark);
        }

        .inventory-items {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
        }

        .inventory-item {
            background: rgba(59, 130, 246, 0.05);
            border: 1px solid var(--border-light);
            border-radius: 0.5rem;
            padding: 0.75rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .inventory-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(59, 130, 246, 0.1);
        }

        .item-icon {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            color: var(--primary-blue);
        }

        .item-name {
            font-size: 0.85rem;
            font-weight: 500;
        }

        /* 响应式设计 */
        @media (max-width: 900px) {
            .content-area {
                grid-template-columns: 1fr;
            }

            .sidebar {
                order: -1;
            }
        }

        @media (max-width: 600px) {
            .top-nav {
                padding: 0 1rem;
            }

            .theater-name {
                font-size: 1.2rem;
            }

            .player-info {
                padding: 0.4rem 0.8rem;
            }

            .player-name {
                display: none;
            }

            .story-container {
                padding: 1.5rem;
            }

            .dialogue {
                flex-direction: column;
            }

            .inventory-items {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 顶部导航 -->
        <header class="top-nav">
            <div class="nav-left">
                <button class="back-btn">
                    <i class="fas fa-arrow-left"></i>
                </button>
                <h1 class="theater-name">奇幻冒险之旅</h1>
            </div>
            <div class="nav-right">
                <div class="player-info">
                    <img src="https://ui-avatars.com/api/?name=勇者&background=3b82f6&color=fff" class="player-avatar">
                    <span class="player-name">勇者</span>
                </div>
                <button class="back-btn">
                    <i class="fas fa-cog"></i>
                </button>
            </div>
        </header>

        <!-- 内容区域 -->
        <div class="content-area">
            <!-- 主内容区 -->
            <main class="story-container">
                <div class="scene-header">
                    <h2 class="scene-title">故事开始</h2>
                    <div class="scene-location">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>宁静村庄</span>
                    </div>
                </div>

                <div class="dialogue-container">
                    <div class="narrative">
                        在一个宁静的小村庄里，你过着平凡的生活。一天，一个神秘的老人来到村庄，带来了一个惊人的消息：远古的邪恶正在苏醒，世界需要英雄来拯救。
                    </div>

                    <div class="dialogue">
                        <img src="https://ui-avatars.com/api/?name=神秘老人&background=06b6d4&color=fff"
                            class="character-avatar">
                        <div class="dialogue-content">
                            <div class="character-name">神秘老人</div>
                            <div class="dialogue-text">
                                年轻人，我从远方带来一个重要的消息。黑暗势力正在苏醒，世界需要像你这样的英雄。你愿意接受这个挑战吗？
                            </div>
                        </div>
                    </div>

                    <div class="dialogue">
                        <img src="https://ui-avatars.com/api/?name=勇者&background=3b82f6&color=fff"
                            class="character-avatar">
                        <div class="dialogue-content">
                            <div class="character-name">勇者</div>
                            <div class="dialogue-text">
                                这太突然了...我只是一个普通的村民。为什么选择我？
                            </div>
                        </div>
                    </div>

                    <div class="dialogue">
                        <img src="https://ui-avatars.com/api/?name=神秘老人&background=06b6d4&color=fff"
                            class="character-avatar">
                        <div class="dialogue-content">
                            <div class="character-name">神秘老人</div>
                            <div class="dialogue-text">
                                我看到了你内心的勇气和潜力。这不仅仅是一个请求，也是命运的安排。接受这个任务，你会发现自己的真正价值。
                            </div>
                        </div>
                    </div>
                </div>

                <div class="choices-container">
                    <div class="choices-title">你的选择：</div>
                    <button class="choice-btn">接受老人的请求，踏上冒险旅程</button>
                    <button class="choice-btn">婉拒老人，继续平静的村庄生活</button>
                    <button class="choice-btn">询问更多关于黑暗势力和任务的细节</button>
                </div>
            </main>

            <!-- 侧边栏 -->
            <aside class="sidebar">
                <h3 class="sidebar-title">
                    <i class="fas fa-users"></i>
                    登场角色
                </h3>

                <div class="characters-list">
                    <div class="character-item active">
                        <img src="https://ui-avatars.com/api/?name=勇者&background=3b82f6&color=fff"
                            class="character-item-avatar">
                        <div class="character-item-info">
                            <div class="character-item-name">勇者</div>
                            <div class="character-item-desc">玩家角色</div>
                        </div>
                    </div>

                    <div class="character-item">
                        <img src="https://ui-avatars.com/api/?name=神秘老人&background=06b6d4&color=fff"
                            class="character-item-avatar">
                        <div class="character-item-info">
                            <div class="character-item-name">神秘老人</div>
                            <div class="character-item-desc">预言者</div>
                        </div>
                    </div>
                </div>

                <h3 class="sidebar-title">
                    <i class="fas fa-box-open"></i>
                    物品栏
                </h3>

                <div class="inventory-items">
                    <div class="inventory-item">
                        <div class="item-icon">
                            <i class="fas fa-ring"></i>
                        </div>
                        <div class="item-name">家传戒指</div>
                    </div>
                    <div class="inventory-item">
                        <div class="item-icon">
                            <i class="fas fa-apple-alt"></i>
                        </div>
                        <div class="item-name">苹果</div>
                    </div>
                    <div class="inventory-item">
                        <div class="item-icon">
                            <i class="fas fa-coins"></i>
                        </div>
                        <div class="item-name">50金币</div>
                    </div>
                </div>

                <h3 class="inventory-title">角色状态</h3>
                <div class="inventory-items">
                    <div class="inventory-item">
                        <div class="item-icon">
                            <i class="fas fa-heart"></i>
                        </div>
                        <div class="item-name">生命值: 100</div>
                    </div>
                    <div class="inventory-item">
                        <div class="item-icon">
                            <i class="fas fa-bolt"></i>
                        </div>
                        <div class="item-name">体力: 85</div>
                    </div>
                    <div class="inventory-item">
                        <div class="item-icon">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <div class="item-name">防御: 10</div>
                    </div>
                </div>
            </aside>
        </div>
    </div>

    <script>
        // 简单的交互功能示例
        document.addEventListener('DOMContentLoaded', function () {
            // 选项按钮点击事件
            const choiceButtons = document.querySelectorAll('.choice-btn');
            choiceButtons.forEach(button => {
                button.addEventListener('click', function () {
                    // 移除所有按钮的选中状态
                    choiceButtons.forEach(btn => {
                        btn.style.background = 'white';
                        btn.style.borderColor = 'var(--border-light)';
                    });

                    // 设置当前按钮为选中状态
                    this.style.background = 'rgba(59, 130, 246, 0.1)';
                    this.style.borderColor = 'var(--primary-blue)';

                    // 模拟加载下一个场景
                    setTimeout(() => {
                        alert('即将进入下一个场景...');
                    }, 1000);
                });
            });

            // 角色项点击事件
            const characterItems = document.querySelectorAll('.character-item');
            characterItems.forEach(item => {
                item.addEventListener('click', function () {
                    characterItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                });
            });
        });
    </script>
</body>

</html>